<template>
  <div ref="chartRef" :style="{ height, width }" />
</template>
<script lang="ts" setup>
import { PropType, ref, Ref, onMounted } from "vue";
import { useECharts } from "@pureadmin/utils";

import { registerMap } from "echarts";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%"
    // default: "400px"
  },
  height: {
    type: String as PropType<string>,
    default: "calc(100vh - 78px)"
    // default: "400px"
  }
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

const assetFengbu = [
  {
    name: "榆林市",
    value: 49
  },
  {
    name: "西安市",
    value: 762
  },
  {
    name: "延安市",
    value: 18
  },
  {
    name: "渭南市",
    value: 78
  },
  {
    name: "铜川市",
    value: 100
  },
  {
    name: "宝鸡市",
    value: 453
  },
  {
    name: "商洛市",
    value: 23
  },
  {
    name: "汉中市",
    value: 34
  },
  {
    name: "安康市",
    value: 6
  },
  {
    name: "咸阳市",
    value: 4
  }
];

onMounted(async () => {
  const json = (await (await import("./shanxi.json")).default) as any;
  registerMap("shanxi", json);
  setOptions({
    //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
    visualMap: [
      {
        min: 0,
        max: 1000,
        left: "left",
        top: "bottom",
        text: ["高", "低"],
        calculable: false,
        seriesIndex: 0, //多个series组成元素，此颜色配置范围只用于series[0]
        orient: "horizontal",
        inRange: {
          // color: ["#e0ffff", "#006edd"],
          color: ["#B1E1F8", "#0672DE"], //淡蓝，深蓝
          //设置点的大小
          // symbolSize: [30, 100]
          symbolSize: [10, 30]
        }
      }
    ],
    //如果需要地图和散点图叠加，需要单独设置options的geo属性,并且设置geoIndex属性
    geo: {
      show: true,
      map: "shanxi",
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: true
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: "#031525", //黑蓝
          borderColor: "#3B5077"
        },
        emphasis: {
          areaColor: "#2B91B7" //#2B91B7,地图鼠标移动上去的颜色
        }
      },
      zoom: 1.2
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0, 0, 0, .6)",
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    series: [
      {
        name: "资产分布",
        type: "map",
        map: "shanxi", //地图名称，应该不是symbol类型
        // mapType: "china", // 自定义扩展图表类型
        geoIndex: 0,
        label: {
          show: true,
          color: "rgb(249, 249, 249)",
          fontSize: 10
        },
        itemStyle: {
          areaColor: "#2f82ce",
          borderColor: "#0DAAC1"
        },
        //data数据name要和地图上geoJson数据的name一致，
        data: assetFengbu
      },
      {
        name: "圆点",
        type: "scatter",
        coordinateSystem: "geo", //坐标类型geo，bmap
        data: [
          { name: "西安", value: [108.952, 34.223, 89] }, // 坐标为 [经度, 纬度]
          { name: "延安", value: [109.496027, 36.595582, 77] }
          // 更多的点...
        ],
        symbolSize: 10, // 点的大小
        itemStyle: {
          color: "#ddb926" // 点的颜色#f4e925
        },
        label: {
          normal: {
            // formatter: "{b}",
            formatter: "{@[2]}", //label为data-value中显示第三个值
            position: "right",
            show: false
          },
          emphasis: {
            show: true
          }
        },
        emphasis: {
          // 高亮时的样式
          itemStyle: {
            color: "yellow"
          }
        }
      },
      {
        name: "涟漪",
        type: "effectScatter",
        coordinateSystem: "geo", //坐标类型geo，bmap
        data: [
          { name: "榆林", value: [109.741193, 38.29, 99] } // 坐标为 [经度, 纬度]
          // 更多的点...
        ],
        symbolSize: 10, // 点的大小
        itemStyle: {
          color: "#ddb926" // 点的颜色
        },
        tooltip: {
          trigger: "item",
          // formatter: "{a},{b}<br />{c}",
          formatter: param => {
            console.log("chart formatter param:", param);
            return `${param.name}<br />${param.value[2]}`;
          },
          backgroundColor: "rgba(0, 0, 0, .6)",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        label: {
          normal: {
            // formatter: "{b}",
            formatter: "{@[2]}", //label为data-value中显示第三个值
            position: "right",
            show: false
          },
          emphasis: {
            show: true
          }
        },
        emphasis: {
          // 高亮时的样式
          itemStyle: {
            color: "yellow"
          }
        }
      }
    ]
  });
});
</script>
